<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <style>
        body {
            margin: 0;
            height: auto;
            min-height: 100vh;
        }

        .h10 {
            width: 100%;
            height: 0.5rem;
            display: -webkit-box;
            clear: both;
            background: #f5f5f5
        }
        .clearfix::after {
          content: '';
          display: block;
          height: 0;
          clear: both;
        }
        .fl {
          float: left;
        }
        .fr {
          float: right;
        }
        #pro1-swiper .swiper-slide {
            height: 10rem;
        }
        .aui-tab-item.aui-active {
            color: #f23030;
            border-bottom: 2px solid transparent;
        }
        .aui-tab-item {
          color: #999;
        }
        .aui-tab-item.up_down::before {
            content: '';
            border: 4px solid transparent;
            border-bottom: 5px solid #999;
            position: absolute;
            left: 72%;
            top: 0;
            bottom: 0px;
            margin: auto;
            height: 0;
            width: 0;
            transform: translateY(-60%);
        }
        .aui-tab-item.up_down::after {
            content: '';
            border: 4px solid transparent;
            border-top: 5px solid #999;
            position: absolute;
            left: 72%;
            top: 0;
            bottom: 0;
            margin: auto;
            height: 0;
            width: 0;
            transform: translateY(60%);
        }
        .aui-tab-item.aui-active.up_down.up::before{
          border-bottom-color: #f23030;
        }
        .aui-tab-item.aui-active.up_down.down::after {
          border-top-color: #f23030;
        }
        .pro_list {
          padding-bottom: 1rem;
        }
        .pro_list_inner {
          width: 48%;
          margin: 1%;
          background: #fff;
          position: relative;
          /*box-shadow: 1px 2px 3px #ccc;*/
          /*min-height: 13.8rem;*/
        }
        .pro_list_img {}
        .pro_list_img img {
          width: 100%;
        }
        .pro_list_text {
          text-align: left;
          padding: 0.8rem;
        }
        .pro_list_text h4 {
          color: #333;
          font-size: 0.65rem;
          height: 1.45rem;
          line-height: 1.2;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .pro_list_text h5 {
          color: #f23030;
          font-size: 0.7rem;
        }
        .pro_list_text h6 {
          color: #feba73;
          font-size: 0.7rem;
          position: absolute;
          bottom: 0.4rem;
          right: 0.8rem
        }
        .pro_list_text p {
          color: #fff;
          padding: 0 0.2rem;
          font-size: 0.7rem;
          position: absolute;
          top: 0;
          left: 0;
          background: #ff6565;
        }
        #tab {
          z-index: 1
        }


        .swiper-container2 {
            width: 100%;
            height: 2.2rem;
            position: relative;
            overflow: hidden;
            background: #fff;
            /*border-bottom: none!important;*/
            border-bottom: 1px solid #999999;
            z-index: 999;
        }

        .swiper-container2 .swiper-slide {
            text-align: center;
            font-size: 0.6rem;
            line-height: 2.2rem;
            color: #000;
            font-size: 0.7rem;
        }

        .swiper-container2 .swiper-slide-active {
            border-bottom: none!important;
        }

        .swiper-container2 span {
            display: initial;
            padding: 0.1rem 0.2rem;
            line-height: 1;
            color: #999999;
            font-weight: 600;
        }

        .swiper-container2 .list_title.active {
            /*border-bottom: 1px solid red!important;*/
            /*font-weight: bold;*/
        }

        .swiper-container2 .list_title.active span {
            background: #f23030;
            display: initial;
            border-radius: 1rem;
            padding: 0.1rem 0.2rem;
            line-height: 1;
            color: #FFF;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <div id="app" >
        <div id="pro1-swiper" class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in banner" :style="'background:url('+item.pic+') no-repeat center; background-size:cover'"></div>
            </div>
        </div>

        <div class="swiper-container2">
            <div class="swiper-wrapper">
                <div class="swiper-slide list_title" v-for="(fl,fl_index) in fl_info" @click="change_state(fl_index,fl.cate_id)" :class="[fl_index==0?'active':'']"><span>{{fl.classname}}</span></div>
            </div>
        </div>

        <div class="aui-tab" id="tab">
            <div class="aui-tab-item aui-active">综合</div>
            <div class="aui-tab-item"><div></div>销量</div>
            <div class="aui-tab-item">最新</div>
            <div class="aui-tab-item up_down">价格</div>
        </div>

        <div class="aui-refresh-content">
        <div class="pro_list clearfix">
          <div class="pro_list_inner fl" v-for="item in goodsList" @click="openDetail(item.goods_name, item.goods_id)">
            <div class="pro_list_img">
              <div :style="'background: url('+item.logo_pic+') no-repeat center/cover; height: 8rem'"></div>
            </div>
            <div class="pro_list_text">
              <h4>{{item.goods_name}}</h4>
              <h5>{{item.price}}兑换币</h5>
            </div>
          </div>
        </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript">

    apiready = function () {
      var keywords='';
      api.addEventListener({
          name: 'search_keywords'
      }, function(ret, err){
          if( ret ){
               keywords=ret.value.keywords;
               app.keywords=keywords;
               app.reloadFunction();
          }else{
               alert( JSON.stringify( err ) );
          }
      });


      var app = new Vue({
        el: '#app',
        data: {
          banner: [],
          goodsList: [],
          page: 1,
          totalpage: 1,
          sort: 1,
          info: {},
          keywords:'',
          fl_info: [],
          cateid:''
        },
        created: function () {

            // alert(api.pageParam.keywords);
            var $_this = this;
            // $_this.keywords=keywords;
            $_this.reloadFunction();
        },
        methods: {
          openDetail: function (name, id) {
            api.openWin({
                name: 'commodity_convert',
                url: '../one_frame/commodity_convert.html',
                pageParam: {
                  name: name,
                  id: id
                }
            })
          },
          reloadFunction:function(){
            var $_this=this;
            api.showProgress({
                title: '努力加载中...',
                text: '先喝杯茶...',
                modal: false
            });
            api.ajax({
              url: window.Url.Freesource_exchangeList,
              method: 'post',
              data: {
                values: {
                  token: $api.getStorage('token'),
                  page: $_this.page,
                  sort: $_this.sort,
                  keywords:$_this.keywords,
                  cateid:$_this.cateid
                }
              }
            }, function(ret, err) {
               api.hideProgress();

                if (ret) {
                  if(ret.re==1){

                    console.log("id----"+$_this.cateid+"----"+JSON.stringify(ret))
                    $_this.goodsList = ret.data.list
                    $_this.banner = ret.data.banner
                    $_this.totalpage = ret.data.sum_page
                    $_this.$nextTick(function () {
                      var bannerSwiper = new Swiper('#pro1-swiper', {
                          autoplay: 3000,
                          loop: true
                      })


                      setTimeout(function() {
                          var swiper = new Swiper('.swiper-container2', {
                              slidesPerView: 5,
                              spaceBetween: 10,
                              freeMode: true
                          });
                      }, 100)
                    })
                  }else{
                    $_this.goodsList = [];
                    api.toast({
                        msg:ret.info,
                        duration: 2000,
                        location: 'bottom'
                    });

                  }

                } else {
                    api.alert({ msg: JSON.stringify(err) });
                }
            })

          },
          // 获取分类
          get_fx: function() {
              var $_this = this;
              api.ajax({
                  url: window.Url.Freegoodscate_index,
                  method: 'post'
              }, function(ret, err) {
                  if (ret) {
                      // console.log("获取到的分类----"+ JSON.stringify( ret ) );
                      if (ret.re == 1) {
                          $_this.fl_info = ret.data.catelist;
                          // console.log(JSON.stringify($_this.fl_info))
                      }

                  } else {
                      alert(JSON.stringify(err));
                  }
              });

          },
          // 点击分类标题
          change_state: function(fl_index, fl_id) {
              var $_this = this;
              $_this.goodsList = [];
              $('.list_title').removeClass('active');
              $('.list_title').eq(fl_index).addClass('active')
              $_this.cateid = fl_id;

              $_this.reloadFunction();
          },
        },
        watch: {
          sort: function () {
            var $_this = this
            $_this.page = 1
            api.ajax({
              url: window.Url.Freesource_exchangeList,
              method: 'post',
              data: {
                values: {
                  token: $api.getStorage('token'),
                  page: $_this.page,
                  sort: $_this.sort,
                  keywords:$_this.keywords
                }
              }
            }, function(ret, err) {
                if (ret) {
                    $_this.goodsList = ret.data.list
                    $_this.banner = ret.data.banner
                    $_this.totalpage = ret.data.sum_page
                    $_this.$nextTick(function () {
                      var bannerSwiper = new Swiper('#pro1-swiper', {
                          autoplay: 3000,
                          loop: true
                      })
                    })
                } else {
                    api.alert({ msg: JSON.stringify(err) });
                }
            })
          }
        },
        mounted: function () {
          var $_this = this;
          $_this.get_fx();
          api.hideProgress()
          var prevIndex = 1
          var tab = new auiTab({
              element: document.getElementById("tab"),
              repeatClick: true
          }, function(ret) {
            if (ret.index == 1) {
              $('.aui-tab-item').eq(3).removeClass('up, down')
              $_this.sort = 1
            } else if (ret.index == 2) {
              $('.aui-tab-item').eq(3).removeClass('up, down')
              $_this.sort = 2
            } else if (ret.index == 3) {
              $('.aui-tab-item').eq(3).removeClass('up, down')
              $_this.sort = 3
            } else if (ret.index == 4) {
              if (prevIndex == ret.index) {
                $('.aui-tab-item').eq(3).toggleClass('up')
                $('.aui-tab-item').eq(3).toggleClass('down')
                if ($('.aui-tab-item').eq(3).hasClass('up')) {
                  $_this.sort = 4
                } else {
                  $_this.sort = 5
                }
              } else {
                $('.aui-tab-item').eq(3).addClass('up')
                $_this.sort = 4
              }
            }
            prevIndex = ret.index
          });
          var pullRefresh = new auiPullToRefresh({
               container: document.querySelector('.aui-refresh-content'),
               triggerDistance: 100
           },function(ret){
               if(ret.status=="success"){
                 api.ajax({
                   url: window.Url.Freesource_exchangeList,
                   method: 'post',
                   data: {
                     values: {
                       token: $api.getStorage('token'),
                       page: $_this.page,
                       province: $api.getStorage('province'),
                       city: $api.getStorage('city'),
                       sort: $_this.sort,
                       keywords:$_this.keywords
                     }
                   }
                 }, function(ret, err) {
                     if (ret) {
                       setTimeout(function(){
                         $_this.goodsList = ret.data.list
                         $_this.banner = ret.data.banner
                         $_this.totalpage = ret.data.sum_page
                           pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                       },500)

                     } else {
                         api.alert({ msg: JSON.stringify(err) });
                     }
                 })

               }
           })
        }
      })
    }
</script>

</html>
